<template>
  <div class="main-container">
      <div style="width: 31%; margin-left: 2%" class="left">
        <div class="left-top">
          <leftSideVue />
        </div>
        <div class="left-bottom">
          <leftBottom></leftBottom>
        </div>
      </div>
      <div style="width: 31%; margin: 0 2%" class="middle">
        <middleSideVue />
      </div>
      <div style="width: 31%; margin-right: 2%" class="right">
        <div class="right-top">
          <rightSideVue />
        </div>
        <div class="right-bottom">
          <rightBottom></rightBottom>
        </div>
      </div>
  </div>
</template>

<script>
import leftSideVue from "../components/smart-weighing/leftSide.vue";
import middleSideVue from "../components/smart-weighing/middleSide.vue";
import rightSideVue from "../components/smart-weighing/rightSide.vue";
import leftBottom from "../components/smart-weighing/leftBottom.vue";
import rightBottom from "../components/smart-weighing/rightBottom.vue";

export default {
  components: {
    leftSideVue,
    middleSideVue,
    rightSideVue,
    leftBottom,
    rightBottom
  },
};
</script>

<style scoped>
.main-container{
  margin-top: 15px;
  /* background-color: gray; */
  display: flex;
  height: 850px;
}
.left,.right{
  height: 850px;
  /* background-color: skyblue; */
}
.middle{
  height: 850px;
}
.left-top,.right-top{
  height: 50%;
  width: 100%;
  /* background-color: yellow; */
}
.left-bottom,.right-bottom{
  height: 50%;
  width: 100%;
  /* background-color: red; */
  position: relative;
  bottom: 15px;
}
</style>